<template>
    <div class="container">
       
        <Categroy title="游戏" >
            <!-- slot-scope ： 接收子组件传输的待操作数据 -->
            <template slot-scope="atbian">
                <ul>
                    <li v-for="(item,index) in atbian.games" :key="index">{{item}}</li>
                </ul>
                 <!-- <h4>{{atbian.x}}</h4> -->
            </template>
        </Categroy>

        <Categroy title="游戏" >
            <!-- 支持ES6 解构赋值 -->
            <template slot-scope="{games}">
                <ol>
                    <li style="color:red" v-for="(item,index) in games" :key="index">{{item}}</li>
                </ol>
            </template>
        </Categroy>

        <Categroy title="游戏" >
            <template slot-scope="{games}">
                <h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
            </template>
        </Categroy>
 
    </div>
</template>

<script>

import Categroy from '@/components/Categroy'

    export default {
        name: "App",
        components: { Categroy },
        
    
    }
</script> 

<style>
    .container,.foot{
        display: flex;
        justify-content: space-around;
    }
    h4{
        text-align: center;
    }
</style>

 